<template>
    <li @click="pointToAlarm(warn)" :class="{active:warn.type === alarmInfo.type && warn.id === alarmInfo.id && warn.time === alarmInfo.time}"  v-if="car_type.type===0||car_type.type===warn.carType">
      <div class="type"><span>{{warn.type}}<span></span></span>
        <!--:<span>{{warn.desc}}</span>-->
      </div>
      <p><span>车 辆 ID <span></span></span> :<span>{{warn.id}}</span></p>
      <p v-if="warn.driver"><span>司机信息<span></span></span> :<span>{{warn.driver}}</span><span>{{warn.tel}}</span></p>
      <p><span>车辆类型<span></span></span> :<span>{{warn.carName}}</span></p>
      <p><span>所属公司<span></span></span> :<span>{{warn.company}}</span></p>
      <p><span>报警时间<span></span></span> :<span>{{warn.time}}</span></p>
    </li>
</template>

<script>
  import MYCONF from '../../myconf'
  import {mapGetters, mapMutations} from 'vuex'
    export default {
        name: 'WarnList',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted(){

        },
      props: {
        warn: {
          type: Object,
        }
      },
      computed: {
        ...mapGetters(['alarmInfo','car_type']),
      },
      methods:{
        pointToAlarm(data){
          this.$emit("clickEvent",data);
        },
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";
   li{
     margin: 0 10px 10px 15px;
     cursor: pointer;
     &:hover,&.active{
       color:#49beef;
     }
     p{
       margin: 0;
       text-align: left;
       line-height: 20px;
       font-size: $list-font;
       span{
         margin-left: 10px;
         height: 20px;
         &:first-child{
           display: inline-block;
           vertical-align: middle;
           width: 64px;
           text-align:justify;
           text-justify:inter-word;
           margin-left: 5px;
           opacity: 0.9;
           font-weight: bold;
         }
         span{
           display: inline-block /* Opera */;
           padding-left: 100%;
         }
       }
     }
     .type {
       line-height: 25px;
       font-size: $list-font;
       color: $color-warn;
       span {
         margin-left: 5px;
         display: block;
         width: 100%;
         text-align: left;
         letter-spacing: 2px;
       }
     }
   }
</style>
